// 项目入口--实现路由组件挂载、渲染
<template>
  <!-- <div id="app"> -->
  <div class="application-container">
    <!-- 头部导航栏 -->
    <header class="header-content">
      <router-view name="header"></router-view>
    </header>
    <!-- 主体 -->
    <main class="main-content">
      <router-view></router-view>
    </main>
    <!-- 尾部Tabbar -->
    <footer>
      <router-view name="footer"></router-view>
    </footer>
  </div>
</template>
<style lang="less">
@import "@/style/common.less";

html,
body {
  height: 100%;
}
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header-content{
  background-color: @c6;
}
.main-content {
  flex: 1;
  overflow: auto;
  background-color: @c10;
}
</style>

